








// 1  link_login 添加一个点击事件 
$('#link_login').click(function(){
  // 2 此时 整个按钮的逻辑有2个  
  // 2.1 去注册账号的时候  让   $('.reg-box') 显示 
  // 2.2 去登录 的时候    让 login-box 显示 

  // 2.3 获取当前点击按钮的内容 
  let text  =  $(this).text().trim()
  console.log(text)
  if(text === '去注册账号') {
    //  让   $('.reg-box') 显示
    $('.reg-box').show().siblings('.login-box').hide()
    $('#link_login').html('去登录')
  } else {
    $('.login-box').show().siblings('.reg-box').hide()
    $('#link_login').html('去注册账号')
  } 

})


//   4 表单校验
//   4.4 layui 提供的全局变量叫 layui   每一个模块名都需要导入下 
// console.log(layui.form)
// 4.4.1  解构 
let  {form} =  layui
console.log(form)

// 4.4.2 以下代码全部来自于官方文档 

form.verify( {
  // 对象的属性 是自定义的属性  属性值 要么是函数  要么数组
  pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] ,
  // 4.4.3  需要自定义一个校验规则   比较2次输入的密码值是否一致 
  repwd: function(value, item){
    // 4.4.4  value：表单的值、item：表单的DOM对象
    // 4.4.5  把当前name=password删除掉 因为发送请求只需要一个
    console.log(value)
    console.log(item)
    // 4.4.6 拿到文本框的值 
    let passwrod = $('.reg-box  [name=password]').val()
    //  value  是重复输入密码的值 
    if(passwrod !=  value) {
      return  '2次输入的密码不一致'
    }
  }
} )

// 需求五 实现注册和登录的逻辑 
// 5.1 注册的逻辑
// 5.2 发送请求 然后跳转到登录界面 
$('.reg-box  form').submit(function(){
  // 5.4 发送请求 
 $.ajax({
  type:'POST',
  url:'/api/reguser',
  // 5.4.1 data 是一个 对象 时候   键是接口文档要求的字段 
  // 5.4.2  $(this).serialize() 
  // 5.4.3   serialize  要求表单必须有name属性    name属性值 是接口文档要求的字段
  data: $(this).serialize(),
  success: res =>{
    console.log(res)
    // 
  
    // 5.4.4 判断是否注册成功 
    // layer 类似于alert  从官方文档查找来的 
    let {layer} = layui
    // res.message  后端返回的注册信息 
     layer.msg(res.message)

    //  5.4.5 注册成功  让去登录点击一下 
    if(res.status == 0 ) {
      //  reset 是DOM的方法  this 指向的就是原生的DOM 
      this.reset() 

      $('#link_login').click()
    }
  }
 })
  // 5.3 阻止默认提交 
  return false 
})


// 需求六： 实现一下登录功能

$('.login-box form').submit(function(){
  // 6.2 发送请求 
  $.ajax({
    type:'POST',
    url:"/api/login",
    data: $(this).serialize(),
    success: res =>{
      console.log(res)
      let {layer} = layui
      // res.message  后端返回的注册信息 
       layer.msg(res.message)
      //  6.3 登录成功需要跳转到首页 
      if(res.status == 0)  {
        // 用服务的形式启动的 / 代表根目录 他会自动加载根目录下面index.html 
        console.log(res)
        // d.5 注意 在跳转之前 把 token 存储到本地 
        localStorage.setItem('token', res.token)

         location.href="/"
      }
    }
  })

  // 6.1 阻止默认事件
  return false 

})


//  存在一种情况 开发的时候提供的是一个接口    http://big-event-api-t.itheima.net
//  实际工作中 我们是前后端并行开发   后端可能提供是一个临时接口  上线之后 在改成真正的线上接口
//  目前这种写法没什么问题 但是 后期替换太麻烦 